<script setup>
import imgData from "@/components/card/imgData.vue";

const Props = defineProps({
  bookArr: {
    type: Array,
    default: [{
      imageSrc: "default-avatar",
      title: "书名",
      intro: "简介",
      category: "类别",
      author: "作者",
      publisher: "出版社",
      score: "评分"
    }]
  }
});
</script>

<template>
  <el-main>
    <!-- 使用 Element Plus 的栅格系统 -->
    <!-- 设置栅格间隔 -->
    <el-row :gutter="20" class="grid-container">
      <!-- xs 超小屏幕 1列 -->
      <!-- sm 小屏幕 2列 -->
      <!-- md 中等屏幕 3列 -->
      <!-- lg 大屏幕 4列 -->
      <!-- xl 超大屏幕 6列 -->
      <el-col v-for="(item, index) in Props.bookArr" :key="index"
              :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="grid-item">
        <img-data :book="item"></img-data>
      </el-col>
    </el-row>
  </el-main>
</template>

<style scoped>
.el-main{
  width: 90%;
  margin: 10px auto;
}
/* 可选：添加容器内边距和项目间距 */
.grid-container {
  padding: 20px;
}

/* 可选：添加项目间距 */
.grid-item {
  margin-bottom: 20px;
  padding: 0 10px; /* 补偿 gutter 的间距 */
}

/* 可选：卡片高度统一 */
.img-data {
  height: 100%;
}
</style>